<template>
	<view class="list_item">
		<view class="list_item_avatar">
			<image :src="preData.from_avatar ? preData.from_avatar : '/static/avatar/default_avatar.png'"
			 class="image"></image>
		</view>
		<view class="list_item_text" @longpress="longPressMessage">
		<text class="from_name" 
		v-if="preData.chat_type === 'group'"
		>{{preData.from_name}}</text>
			<!-- 文字 -->
			<text class="text" v-if="preData.type === 'text'"
			>{{preData.data}}</text>
			<!-- 表情 -->
			<image :src="preData.data" mode="widthFix"
			v-else-if="preData.type === 'emo'" class="image"></image>
			<!-- 图片 -->
			<image :src="preData.data" mode="widthFix" @tap="onImage(preData.data)"
			v-else-if="preData.type === 'image'" class="image"></image>
			<!-- 视频 -->
			<video :src="preData.data"
			v-else-if="preData.type === 'video'"
			:poster="`${preData.data}?x-oss-process=video/snapshot,t_10,m_fast,w_300,f_png`"
			class="video"></video>
			
			<!-- 名片 -->
			<view v-else-if="preData.type === 'card'" class="card" @tap="addFriend">
				<view class="top">
					<img :src="preData.options.avatar ? preData.options.avatar : '/static/avatar/default_avatar.png'" class="image_op">
					<text class="name">{{preData.options.name}}</text>
				</view>
				<text class="text">个人名片</text>
			</view>
			
			<!-- 定位 -->
			<view class="location" v-else-if="preData.type === 'map'" @click="clickMap">
				<map class="map" 
				:longitude="preData.options.longitude"
				:latitude="preData.options.latitude"></map>
			</view>
			
		</view>
		<view class="load_box">
			<image src="/static/load/load.gif" class="load" v-if="preData.sendStatus === 'pending'"></image>
			<image src="/static/load/fail.png" class="load" v-if="preData.sendStatus === 'fail'"></image>
		</view>
	</view>
</template>

<script setup>
	const props = defineProps({
		preData:{ // 每一项数据
			type:Object,
			default:() => {}
		},
		urlList:{ // 当前聊天中所以的图品地址
			type: Array,
			default: () => []
		}
	})
	
	const emit = defineEmits(['cardAddRriend','longPressMessage'])
	
	const onImage = (url) => { // 点击每一项图片
		uni.previewImage({
			current:url,
			urls:props.urlList,
			longPressActions:true
		})
	}
	
	const addFriend = () => { // 点击个人名片添加好友
		emit('cardAddRriend',props.preData)
	}
	
	const clickMap = () => { // 点击地图
		uni.openLocation({
			latitude:props.preData.options.latitude,
			longitude:props.preData.options.longitude
		})
	}
	
	const longPressMessage = (e) => {
		emit('longPressMessage',e,props.preData)
	}
	
</script>

<style lang="less" scoped>
	.list_item {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-bottom: 10rpx;
		.load_box{
			.load{
				width: 35rpx;
				height: 35rpx;
			}
		}
		.list_item_avatar {
			margin-right: 10rpx;
			.image {
				width: 70rpx;
				height: 70rpx;
				border-radius: 10rpx;
			}
		}
	
		.list_item_text {
			display: flex;
			flex-direction: column;
			.from_name{
				font-size: 25rpx;
				
			}
			.text {
				padding: 10rpx 15rpx;
				border-radius: 10rpx;
				max-width: 300rpx;
				background-color: #f7931e;
			}
			.image {
				width: 200rpx;
				height: 200rpx;
				margin-top: 30%;
				border-radius: 10rpx;
			}

			.video {
				width: 200rpx;
				height: 300rpx;
				margin-top: 130rpx;
				border-radius: 10rpx;
			}
			
			.location{
				width: 300rpx;
				height: 150rpx;
				border-radius: 15rpx;
				.map{
					width: 300rpx;
					height: 150rpx;
				}
			}
			
			.card{
				width: 300rpx;
				height: 150rpx;
				display: flex;
				overflow: hidden;
				flex-direction: column;
				border-radius: 20rpx;
				background-color: #f7931e;
				.top{
					height: 100rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;
					border-bottom: 1rpx solid #eee;
					.image_op{
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
					}
					.name{
						font-size: 30rpx;
						margin-left: 20rpx;
					}
				}
				.text{
					flex: 1;
					width: 100%;
					margin-left: 20rpx;
					font-size: 25rpx;
				}
			}
			// .audio{
			// 	display: flex;
			// 	flex-direction: row;
			// 	align-items: center;
			// 	padding: 10rpx 15rpx;
			// 	border-radius: 10rpx;
			// 	background-color: #f7931e;
			// }
		}
	}
</style>